<template>
  <div :class="computedClass" :style="computedStyle"></div>
</template>

<script>
export default {
  name: 'Divider',
  props: {
    isDashed: {
      type: Boolean,
      default: false,
    },
    length: {
      type: String,
      default: '100%',
    },
    dashGap: {
      type: String,
      default: '10px',
    },
    dashHeight: {
      type: String,
      default: '1px',
    },
    color: {
      type: String,
      default: '#EFEFEF',
    },
  },
  computed: {
    computedClass() {
      return this.isDashed ? 'dashedDivider' : 'solidDivider';
    },
    computedStyle() {
      if (this.isDashed) {
        return {
          background: `linear-gradient(to left, transparent 0%, transparent 50%, ${
            this.color
          } 50%, ${this.color} 100%)`,
          backgroundSize: `${this.dashGap} ${this.dashHeight}`,
          backgroundRepeat: 'repeat-x',
          width: this.length,
          height: this.dashHeight,
        };
      } else {
        return {
          width: this.length,
          height: this.dashHeight,
          backgroundColor: this.color,
        };
      }
    },
  },
};
</script>

<style lang="scss">
.solidDivider {
}

.dashedDivider {
}
</style>
